<template>
    <div class="article">
        <div class="card" v-for="(item,index) in searchArticleData" :key="index">
            <div class="title">{{item.title}}</div>
            <div class="content">{{item.content}}</div>
            <div style="textAlign:right;marginTop:.4em">
                <span class="atext" @click="getMore(item.id)">查看</span>
                <span class="atext" v-if="grade==1" @click="editArticle(item.id)">编辑</span>
                <span class="atext" style="color:red" @click="deleteArticle(item.id)" v-if="grade==1">删除</span>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default{
    computed: {
        ...mapGetters([
            'searchArticleData',
            'grade'
        ])
    },
    methods:{
        // 删除文章
        deleteArticle(id){
            if (confirm("确定删除吗？")==true){
                this.$store.commit('deleteArticle',id)
            }
        },

        // 编辑文章
        editArticle(id){
            this.$emit('update-article',id)
        },

        // 文章详情
        getMore(id){
            this.$store.commit('setSelectedId',id)
            this.$router.push('/diary/detail')
        },
    },
}
</script>
<style scoped lang="less">
.article{
    margin-top: 1em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    .title{
        font-weight: 500;
        margin-bottom: .5em;
    }
    .content{
        font-weight: 400;
        font-size: .8em;
        max-width: 400px;
        overflow: hidden;
    }
}
</style>

